import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import Banner from './banner'
import Arrow from './arrow'
import Tip from './tip'
import './slider.scss'
function App() {
  let timer = null;
  let [list, setList] = useState([
    { id: 1, text: "珠" },
    { id: 11, text: "峰" },
    { id: 12, text: "培" },
    { id: 13, text: "训" },
  ])
  let [index, setIndex] = useState(0);// 控制显示图片的索引
  const move = () => {
    timer = setInterval(() => {
      setIndex(index + 1)
      console.log(666)
    }, 3000);
  }
  useEffect(() => {
    console.log('DOM加载完成')
    move()
    return () => {
      clearInterval(timer)
    }
  }, [index])
  const initIndex = (n) => {
    setIndex(n)
  }
  return <div className='box'
    onMouseEnter={() => clearInterval(timer)}
    onMouseLeave={() => move()}
  >
    <Banner list={list} index={index} onInitIndex={initIndex} />
    <Arrow onLeft={() => setIndex(index - 1)} onRight={() => setIndex(index + 1)} />
    <Tip />
  </div>
}

ReactDOM.render(<App />, document.getElementById('root'))